import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  Pressable,
  Alert,
} from "react-native";
import React, { useEffect, useState } from "react";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import Icon from "react-native-vector-icons/Ionicons";
import  HeaderBack from '../../components/HeaderBack'

import ModalInputPack from "../../components/ModalInputPack";

import { getUserInfoApi } from "../../api/user";

import { GetUserInfoResponse } from "../../api/types/user";

type Props = {
  navigation: NativeStackNavigationProp<any>;
};

export default function UserEditor({ navigation }: Props) {
  navigation.setOptions({
    headerLeft(props) {
      return (
        <HeaderBack props={props} />
      )
    },
  })

  const [user, setUser] = useState<GetUserInfoResponse>();

  const [modalVisible, setModalVisible] = useState(false);
  const [modalTitle, setModalTitle] = useState("");
  const [modalInputPackData, setModalInputPackData] = useState({});

  useEffect(() => {
    getUserDetailsData();
  }, []);

  // 获取用户信息
  async function getUserDetailsData() {
    const res = await getUserInfoApi<GetUserInfoResponse>();
    console.log(res);
    if (res.code == 200) {
      setUser(res.data);
    }
  }

  // 跳转到 UserEditorForm 页面
  function goToEditorForm(
    type: string,
    title: string,
    data: string | undefined
  ) {
    navigation.navigate("UserEditorForm", { type, title, data });
  }

  // 显示魔钛框
  function openModalInputPack(type: string) {
    console.warn(type);
    switch (type) {
      case "sex":
        setModalInputPackData({
          title: "请输入性别",
        });
        break;
      case "age":
        setModalInputPackData({
          title: "请输入年龄",
          tip: "岁",
        });
        break;
      case "birthday":
        setModalInputPackData({
          title: "请输入生日",
          tip: "",
        });
        Alert.alert("暂不支持更改生日");
        return;
      default:
        break;
    }
    setModalVisible(true);
  }

  return (
    <>
      <ScrollView style={styles.container}>
        <View style={styles.box}>
          <View style={[styles.boxItem, { paddingTop: 0, paddingBottom: 14 }]}>
            <View style={styles.boxItemTitle}>
              <Text style={styles.boxItemTitleText}>更换头像</Text>
            </View>
            <View style={styles.boxItemContent}>
              <View style={styles.boxItemCamera}>
                <Icon
                  style={styles.boxItemCameraIcon}
                  name="camera-outline"
                ></Icon>
              </View>
              <Icon name="chevron-forward" size={20} color="#999"></Icon>
            </View>
          </View>
          <View style={styles.boxItem}>
            <View style={styles.boxItemTitle}>
              <Text style={styles.boxItemTitleText}>昵称</Text>
            </View>
            <Pressable
              onPress={() => {
                goToEditorForm("name", "昵称", user?.name);
              }}
              style={styles.boxItemContent}
            >
              <Text style={styles.boxItemContentText}>{user?.name}</Text>
              <Icon name="chevron-forward" size={20} color="#999"></Icon>
            </Pressable>
          </View>
          <View style={styles.boxItem}>
            <View style={styles.boxItemTitle}>
              <Text style={styles.boxItemTitleText}>邮箱</Text>
            </View>
            <Pressable
              onPress={() => {
                openModalInputPack("email");
              }}
              style={styles.boxItemContent}
            >
              <Text style={styles.boxItemContentText}>{user?.email}</Text>
              <Icon name="chevron-forward" size={20} color="#999"></Icon>
            </Pressable>
          </View>
          <View style={styles.boxItem}>
            <View style={styles.boxItemTitle}>
              <Text style={styles.boxItemTitleText}>手机号码</Text>
            </View>
            <Pressable
              onPress={() => {
                openModalInputPack("phone");
              }}
              style={styles.boxItemContent}
            >
              <Text style={styles.boxItemContentText}>{user?.phone}</Text>
              <Icon name="chevron-forward" size={20} color="#999"></Icon>
            </Pressable>
          </View>
          <View style={styles.boxItem}>
            <View style={styles.boxItemTitle}>
              <Text style={styles.boxItemTitleText}>性别</Text>
            </View>
            <Pressable
              onPress={() => {
                openModalInputPack("sex");
              }}
              style={styles.boxItemContent}
            >
              <Text style={styles.boxItemContentText}>
                {user?.sex == -1 ? "保密" : user?.sex == 0 ? "女" : "男"}
              </Text>
              <Icon name="chevron-forward" size={20} color="#999"></Icon>
            </Pressable>
          </View>
          <View style={styles.boxItem}>
            <View style={styles.boxItemTitle}>
              <Text style={styles.boxItemTitleText}>年龄</Text>
            </View>
            <Pressable
              onPress={() => {
                openModalInputPack("age");
              }}
              style={styles.boxItemContent}
            >
              <Text style={styles.boxItemContentText}>
                {user?.age ? user?.age : "保密"}
              </Text>
              <Icon name="chevron-forward" size={20} color="#999"></Icon>
            </Pressable>
          </View>
          <View style={styles.boxItem}>
            <View style={styles.boxItemTitle}>
              <Text style={styles.boxItemTitleText}>生日</Text>
            </View>
            <Pressable
              onPress={() => {
                openModalInputPack("birthday");
              }}
              style={styles.boxItemContent}
            >
              <Text style={styles.boxItemContentText}>
                {user?.birthday ? user?.birthday : "保密"}
              </Text>
              <Icon name="chevron-forward" size={20} color="#999"></Icon>
            </Pressable>
          </View>
          <View style={styles.boxItem}>
            <View style={styles.boxItemTitle}>
              <Text style={styles.boxItemTitleText}>个人简介</Text>
            </View>
            <Pressable
              onPress={() => {
                goToEditorForm("desc", "个人简介", user?.desc);
              }}
              style={styles.boxItemContent}
            >
              <Text style={styles.boxItemContentText}>{user?.desc}</Text>
              <Icon name="chevron-forward" size={20} color="#999"></Icon>
            </Pressable>
          </View>
        </View>
      </ScrollView>
      <ModalInputPack
        {...modalInputPackData}
        visible={modalVisible}
        onClose={() => {
          setModalVisible(false);
        }}
        onSubmit={(message) => {
          console.warn(message);
        }}
      ></ModalInputPack>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  box: {
    padding: 10,
  },
  boxItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    // padding: 10,
    paddingTop: 20,
    paddingBottom: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#efefef",
  },
  boxItemTitle: {
    flexDirection: "row",
    alignItems: "center",
  },
  boxItemTitleText: {
    fontSize: 16,
    // fontWeight: "bold",
    color: "#333",
  },
  boxItemContent: {
    flexDirection: "row",
    alignItems: "center",
  },
  boxItemContentText: {
    fontSize: 16,
    color: "#666",
    paddingRight: 10,
  },
  boxItemCamera: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: "#0ca678",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 10,
  },
  boxItemCameraIcon: {
    color: "#fff",
    fontSize: 30,
  },
});
